<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 新增按钮 -->
      <div class="new-btn">
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- /新增按钮 -->
      <!-- 筛选区域 -->
      <div class="screen">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="学科">
            <el-select
              placeholder="请选择"
              v-model="dropDown.subjectID"
              @change="handleSubject"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in subjectList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select placeholder="请选择" v-model="dropDown.catalogID">
              <el-option
                :label="item.directoryName"
                :value="item.id"
                v-for="(item, index) in direList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select placeholder="请选择" v-model="dropDown.tags">
              <el-option
                :label="item.tagName"
                :value="item.id"
                v-for="(item, index) in tagsList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input v-model="dropDown.antistop"></el-input>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select placeholder="请选择" v-model="dropDown.question">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in questionType"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select placeholder="请选择" v-model="dropDown.direction">
              <el-option
                :label="item.label"
                :value="index"
                v-for="(item, index) in difficulty"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select placeholder="请选择" v-model="dropDown.direNew">
              <el-option
                :label="item"
                :value="index"
                v-for="(item, index) in direction"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select placeholder="请选择" v-model="dropDown.userType">
              <el-option
                :label="item.username"
                :value="index"
                v-for="(item, index) in userList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input v-model="dropDown.remark"></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="dropDown.firm"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select
              placeholder="请选择"
              size="mini"
              class="mini-ipt"
              v-model="dropDown.province"
              @change="handleProvince"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item in citySelect.province"
                :key="item"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              size="mini"
              class="mini-ipt"
              v-model="dropDown.city"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item in citySelect.cityDate"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="mini-btn">
            <el-button size="mini" @click="onClear">清除</el-button>
            <el-button type="primary" size="mini" @click="seek">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- /筛选区域 -->
      <!-- 列表区域 tab -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="全部" name="first">
          <!-- 数据记录 -->
          <el-alert
            v-if="alertText !== ''"
            :title="alertText"
            type="info"
            class="alert"
            :closable="false"
            show-icon
          ></el-alert>
          <!-- end -->
          <!-- 数据列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="150px">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="150px">
            </el-table-column>
            <el-table-column prop="" label="题型" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(questionType, scope.row.questionType).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="题干" width="150px">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="180px">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="难度" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(difficulty, scope.row.difficulty).label }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="审核状态" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(chkType, scope.row.chkState + 1).label }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150px">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="发布状态" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(publishType, scope.row.publishState + 1).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" fixed="right" label="操作" width="260px">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="quesShow(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState === 1 ? true : false"
                  @click="auditShow(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small"  @click="amend(scope.row)">修改</el-button>
                <el-button type="text" size="small"  @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 1 ? true : false" @click="removeUser(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <!-- 数据记录 -->
          <el-alert
            v-if="alertText !== ''"
            :title="alertText"
            type="info"
            class="alert"
            :closable="false"
            show-icon
          ></el-alert>
          <!-- end -->
          <!-- 数据列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="150px">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="150px">
            </el-table-column>
            <el-table-column prop="" label="题型" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(questionType, scope.row.questionType).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="题干" width="150px">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="180px">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="难度" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(difficulty, scope.row.difficulty).label }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="审核状态" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(chkType, scope.row.chkState + 1).label }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150px">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="发布状态" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(publishType, scope.row.publishState + 1).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" fixed="right" label="操作" width="260px">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="quesShow(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState === 1 ? true : false"
                  @click="auditShow(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small"  @click="amend(scope.row)">修改</el-button>
                <el-button type="text" size="small"  @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 1 ? true : false" @click="removeUser(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <!-- 数据记录 -->
          <el-alert
            v-if="alertText !== ''"
            :title="alertText"
            type="info"
            class="alert"
            :closable="false"
            show-icon
          ></el-alert>
          <!-- end -->
          <!-- 数据列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="150px">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="150px">
            </el-table-column>
            <el-table-column prop="" label="题型" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(questionType, scope.row.questionType).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="题干" width="150px">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="180px">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="难度" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(difficulty, scope.row.difficulty).label }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="审核状态" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(chkType, scope.row.chkState + 1).label }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150px">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="发布状态" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(publishType, scope.row.publishState + 1).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" fixed="right" label="操作" width="260px">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="quesShow(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState === 1 ? true : false"
                  @click="auditShow(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small"  @click="amend(scope.row)">修改</el-button>
                <el-button type="text" size="small"  @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 1 ? true : false" @click="removeUser(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <!-- 数据记录 -->
          <el-alert
            v-if="alertText !== ''"
            :title="alertText"
            type="info"
            class="alert"
            :closable="false"
            show-icon
          ></el-alert>
          <!-- end -->
          <!-- 数据列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="150px">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="150px">
            </el-table-column>
            <el-table-column prop="" label="题型" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(questionType, scope.row.questionType).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="题干" width="150px">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="180px">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="难度" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(difficulty, scope.row.difficulty).label }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="审核状态" width="150px">
              <template slot-scope="scope">
                {{ getQuesTionType(chkType, scope.row.chkState + 1).label }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150px">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="150px">
            </el-table-column>
            <el-table-column prop="" label="发布状态" width="150px">
              <template slot-scope="scope">
                {{
                  getQuesTionType(publishType, scope.row.publishState + 1).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="" fixed="right" label="操作" width="260px">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="quesShow(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState === 1 ? true : false"
                  @click="auditShow(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small"  @click="amend(scope.row)">修改</el-button>
                <el-button type="text" size="small"  @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 1 ? true : false" @click="removeUser(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- /列表区域 -->
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(redaad.page)"
        :total="Number(total)"
        :page-size="Number(redaad.pagesize)"
        :page-sizes="[1, 5, 10, 20]"
        layout="sizes, prev, pager, next, jumper"
        class="fr paging"
      >
      </el-pagination>
      <!-- /分页 -->
      <!-- 预览框 -->
      <el-dialog title="提示" :visible.sync="quesRead" width="60%">
        <el-row class="readTop">
          <el-col :span="6"
            ><div>
              【题型】:{{
                quesTions.questionType === "1"
                  ? "单选"
                  : quesTions.questionType === "2"
                  ? "多选"
                  : "简答"
              }}
            </div></el-col
          >
          <el-col :span="6"
            ><div>【编号】:{{ quesTions.id }}</div></el-col
          >
          <el-col :span="6"
            ><div>
              【难度】:{{
                quesTions.difficulty === "1"
                  ? "简单"
                  : quesTions.difficulty === "2"
                  ? "一般"
                  : "困难"
              }}
            </div></el-col
          >
          <el-col :span="6"
            ><div>【标签】:{{ quesTions.tags }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"
            ><div>【学科】:{{ quesTions.subject }}</div></el-col
          >
          <el-col :span="6"
            ><div>【目录】:{{ quesTions.catalog }}</div></el-col
          >
          <el-col :span="6"
            ><div>【方向】:{{ quesTions.direction }}</div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="24"><div>【题干】:</div></el-col>
          <el-col :span="24" class="question_stem">
            <div v-html="quesTions.question"></div>
            <div v-if="showVideo === '1'" class="preview">
              <el-radio
                disabled
                v-model="radio"
                :label="item.isRight"
                v-for="(item, index) in questionTypes"
                :key="index"
                >{{ item.title }}</el-radio
              >
            </div>
            <div v-if="showVideo === '2'">
              <el-checkbox
                disabled
                v-model="checked"
                :label="item.isRight"
                v-for="(item, index) in questionTypes"
                :key="index"
                >{{ item.title }}</el-checkbox
              >
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <div>
            【参考答案】：<el-button
              type="danger"
              @click="selectShow = !selectShow"
              >视频参考答案</el-button
            >
          </div>
            <video
              width="700px"
              height="400px"
              :src="quesTions.videoURL"
              controls
              v-show="selectShow"
            ></video>
        </el-row>
        <el-divider></el-divider>
        <span>【答案解析】：</span><span v-html="quesTions.answer"></span>
        <el-divider></el-divider>
        <div>【题目备注】：{{ quesTions.remarks }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="quesRead = false">关闭</el-button>
        </span>
      </el-dialog>
      <!-- /预览框 -->
      <!-- 审核框 -->
      <el-dialog title="提示" :visible.sync="auditVisible" width="30%">
        <el-radio-group v-model="radioAudit">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="auditVisible = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 审核框 -->
    </el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { list as directorys } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { list as userList } from '@/api/base/users'
import { choice, detail, remove, choicePublish, choiceCheck } from '@/api/hmmm/questions'
import {
  difficulty,
  direction,
  questionType,
  chkType,
  publishType
} from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'ConTainer',
  components: {},
  props: {},
  data () {
    return {
      dropDown: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        question: '', // 试题
        direNew: '', // 方向
        userType: '', // 录入人
        antistop: '', // 关键词
        remark: '', // 题目备注
        firm: '', // 企业
        difficulty: '', // 难度
        city: '',
        province: ''
      },
      redaad: {
        page: 1,
        pagesize: 5,
        chkState: null
      },
      total: null,
      alertText: '',
      activeName: 'first', // Tabs 默认点击实现高亮
      tableData: [], //  精选题库列表
      subjectList: [], // 学科列表
      direList: [], // 二级目录
      tagsList: [], // 标签列表
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      questionType: questionType, // 题型
      chkType: chkType, // 审核状态
      publishType: publishType, // 发布状态
      userList: [],
      citySelect: {
        province: [],
        cityDate: []
      },
      // 上下架
      publishData: {
        id: null,
        publishState: null
      },
      quesRead: false, // 阅览显示与隐藏
      auditVisible: false, // 审核框显示与隐藏
      quesTions: {}, // 阅览获取的指定数据
      questionTypes: {}, // 基础题库详情
      value: '',
      radio: 1, // 预览单选框值
      radioAudit: 1, // 审核单选框值
      checked: [1],
      selectShow: false, // 视频的显示与隐藏
      showVideo: '',
      textarea: '', // 审核框文本
      auditChkState: '' // 审核单选中需要的返回值
    }
  },
  created () {
    this.loadchoice()
    this.loadlist()
    this.loadUser()
    this.getCityData()
  },
  methods: {
    //  获取学科列表
    async loadchoice (val) {
      const { data: res } = await choice(this.redaad)
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      // 获取数据给tableData
      this.tableData = res.items
      // console.log(this.tableData)
    },
    // 获取基础题库详情
    async loadDetail (data) {
      const { data: res } = await detail(data)
      this.questionTypes = res.options
      // console.log(this.questionTypes)
    },
    // 获取下拉框 学科列表
    async loadlist () {
      const { data: res } = await simple()
      this.subjectList = res
    },
    // 获取下拉框 二级目录列表
    async loadDire (val) {
      const { data: res } = await directorys({ subjectID: val })
      this.direList = res.items
    },
    // 获取下拉框  标签列表
    async loadTags (val) {
      const { data: res } = await tagsList({ subjectID: val })
      // console.log(res)
      this.tagsList = res.items
    },
    // 获取下拉框 录入人
    async loadUser () {
      const { data: res } = await userList()
      this.userList = res.list
    },
    // change 监听 二级目录和标签
    handleSubject (e) {
      this.dropDown.catalogID = ''
      this.dropDown.tagName = ''
      this.loadDire(e)
      this.loadTags(e)
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      // console.log(this.citySelect.cityDate)
      // this.dropDown.city = this.citySelect.cityDate[0]
    },
    // 清除
    onClear () {
      this.dropDown = {
        catalogID: '', // 二级目录
        tagName: '' // 标签
      }
      this.direList = []
      this.tagsList = []
      this.citySelect.cityDate = []
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.redaad.pagesize = val
      if (this.redaad.page === 1) {
        this.loadchoice(this.dropDown)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.redaad.page = val
      this.loadchoice()
    },
    // 搜索
    async seek (val) {
      const { data: res } = await choice({ ...this.redaad, ...this.dropDown })
      // 获取数据给tableData
      this.tableData = res.items
      this.loadchoice()
    },
    tabClick (tab) {
      if (tab.name === 'first') {
        this.redaad.chkState = null
        this.loadchoice()
      } else if (tab.name === 'second') {
        this.redaad.chkState = 0
        this.loadchoice()
      } else if (tab.name === 'third') {
        this.redaad.chkState = 1
        this.loadchoice()
      } else if (tab.name === 'fourth') {
        this.redaad.chkState = 2
        this.loadchoice()
      }
    },
    // 预览功能
    async quesShow (data) {
      this.quesRead = true
      this.quesTions = data

      this.showVideo = data.questionType
      // console.log(this.showVideo)
      // console.log(data)

      // console.log(this.quesTions)
      this.loadDetail(data)
    },
    auditShow (data) {
      this.auditVisible = true
      // console.log(data)
      this.auditChkState = data.chkState
    },
    // 点击修改按钮
    amend (data) {
      this.$router.push({ path: '/questions/new', query: { id: data.id } })
    },
    // 点击审核弹出层确定按钮
    onConfirm () {
      this.auditData.chkRemarks = this.auditForm.chkRemarks
      // console.log(this.auditData)
      this.$refs.auditRef.validate(async (value) => {
        if (value) {
          await choiceCheck(this.auditData)
          this.loadDetail()
          this.auditDialog = false
        } else {
          this.$message({
            message: '请输入审核意见',
            type: 'warning'
          })
        }
      })
    },
    // 上架下架 点击按钮
    onPublish (data) {
      const publish = data.publishState === 1 ? '下架' : '上架'
      this.$confirm('你确定' + publish + '这道题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.publishData.id = data.id
        this.publishData.publishState = data.publishState === 1 ? data.publishState = 0 : data.publishState = 1
        // console.log(this.publishData)
        await choicePublish(this.publishData)
        this.loadDetail()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 删除
    removeUser (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.tableData.splice(user, 1)
              this.loadchoice(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }
  },
  computed: {
    // 获取 constats 的value值，渲染 label 值
    getQuesTionType () {
      return function (arr, val) {
        return arr.find((item) => {
          return item.value === +val
        })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
  .new-btn {
    position: relative;
    width: 100%;
    height: 60px;
    button {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  /deep/.screen {
    padding: 20px;

    .mini-ipt {
      input {
        width: 150px;
      }
    }
    .el-form-item__content,
    .el-input__inner {
      width: 300px;
      height: 40px;
      align-items: center;
      justify-content: flex-end;
    }
    .demo-form-inline {
      display: flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      flex-flow: wrap;
      .el-form-item__label {
        width: 68px;
      }
      .mini-btn {
        width: 371px;
        padding-left: 249px;
      }
    }
    .el-form-item__label {
      font-size: 14px;
      font-weight: 600;
    }
  }
  .el-icon-info {
    font-size: 14px;
    margin: 0 0 15px 0;
  }
  .paging {
    padding: 20px 0;
  }
  .readTop {
    margin-bottom: 20px;
  }
  .question_stem {
    margin-top: 10px;
    color: #2c2cff;
    font-size: 15px;
    font-weight: 600;
  }
  .preview .el-radio,
  .el-checkbox {
    display: block;
    margin-bottom: 10px;
  }
  .el-textarea {
    margin: 20px 0;
  }
}
</style>
